<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外边距</title>
        <style type="text/css">
            .outer { border: 1px solid blue ; margin-top: 15px ; }
            .inner { border: 1px solid green ; height: 100px ; }
            .first { margin: 10px 15px 10px 15px ; /* 上 右 下 左 */  }
            .second { margin: 10px 15px ; /* 先上下 后左右 */ }
            .third { margin: 10px ;  }
            .fourth { margin: 10px 20px 30px ; }
            .fifth { width: 80% ; margin: 15px auto ; }
        </style>
    </head>
    <body>

        <div class="outer">
            <div class="inner first"></div>
        </div>

        <div class="outer">
            <div class="inner second"></div>
        </div>

        <div class="outer">
            <div class="inner third"></div>
        </div>

        <div class="outer">
            <div class="inner fourth"></div>
        </div>

        <div class="outer">
            <div class="inner fifth"></div>
        </div>

    </body>
</html>